<template>
	<view class="containerHead">
		<image class="containerImg" src="../../static/indexbj.png" mode=""></image>
		<view class="container">
			<view class="containerImgHead">
				<image src="../../static/rdddk.png" style="width: 200rpx;height: 42rpx;" mode=""></image>
				<text style="float: right;">
					<!-- <image src="../../static/kf.png" style="width: 42rpx;height: 42rpx;" mode=""></image> -->
				</text>
			</view>
			<view class="introduce">
				<view style="font-family: Bahnschrift;">
					最高二十万额度
				</view>
				<view class="introduceHead">
					快速审核，随用随取
				</view>
			</view>
			<view class="quota">
				<view style="font-size: 28rpx;font-family: PingFang SC;padding: 55rpx 0;">
					最高可借额度 (元)
				</view>
				<view style="font-size: 120rpx;font-family: Bahnschrift;">
					200,000
					<!-- {{loan_max_explain}} -->
				</view>
				<view class="quotaHead">
					<view class="quotaHeadDiv">
						<image src="../../static/gll.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
						<text class="quotaHeadDivName">通过率高</text>
					</view>
					<view class="quotaHeadDiv" style="border-left: 1px solid #C7CFD5;border-right: 1px solid #C7CFD5;">
						<image src="../../static/lld.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
						<text class="quotaHeadDivName">利率低</text>
					</view>
					<view class="quotaHeadDiv">
						<image src="../../static/jsfk.png" style="width: 24rpx;height: 40rpx;" mode=""></image>
						<text class="quotaHeadDivName">极速放款</text>
					</view>
				</view>
				<view class="quotaBottom" @click="IndexClick(1)">
					领取额度
				</view>
			</view>

			<view style="margin-top: 36rpx;">
				<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
					<swiper-item v-for="(item,index) in Banner">
						<view class="swiper-item uni-bg-red" style="height: 201rpx;">
							<image :src="item.image" style="width: 100%;height: 100%;" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
				
			<view class="indexBottom">
				融 多 多 贷 款 · 您 的 贷 款 专 家
			</view>
		</view>
	</view>
</template>

<script>
	import uniSwiperDot from "@/components/uni-swiper-dot/uni-swiper-dot.vue"
	export default {
		components: {
			uniSwiperDot
		},
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				Banner:'',
				website:'',
				loan_max_explain:0,		//金额
			}
		},
		onLoad() {
			var that = this;
			that.key = uni.getStorageSync('token');
			if(that.key == '' || that.key == undefined){
				uni.reLaunch({
				    url: '../second/Sign'
				});
			}
			this.IndexFunction();
			this.ApiWebsite();
		},
		methods: {
			ApiWebsite(){
				var that = this;
				that.$H.get('/website', {
				}, {
					native: false
				}).then(res => {
					that.website = res.data;
					that.loan_max_explain = res.data.loan_max_explain.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
				})
			},
			IndexClick(index){
				if(index == 1){
					uni.navigateTo({		//领取我的额度
					    url: '../second/PreferredLoan'
					});
				}
			},
			IndexFunction(){
				var that = this;
				that.$H.get('/index', {
				}, {
					native: false
				}).then(res => {
					that.Banner = res.data.banner;
					console.log(that.Banner)
				})
				
			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			}
		}
	}
</script>

<style>
	.indexBottom{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #878787;
		text-align: center;
		margin-top: 23rpx;
	}
	uni-swiper{
		height: 200rpx;
	}
	.quotaBottom {
		margin: auto;
		width: 590rpx;
		height: 95rpx;
		line-height: 95rpx;
		background: linear-gradient(-84deg, #FFEBD1, #FFCD99);
		border-radius: 50rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		margin-top: 50rpx;
		box-shadow: 0px 6px 21px 0px rgba(0, 0, 0, 0.09);
	}

	.quotaHeadDivName {
		position: relative;
		top: -10rpx;
		margin-left: 12rpx;
	}

	.quotaHeadDiv {
		display: inline-block;
		font-size: 24rpx;
		font-family: PingFang SC;
		width: 200rpx;
		text-align: center;
		margin-top: 50rpx;
	}

	.quotaHead {}

	.quota {
		text-align: center;
		width: 688rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		min-height: 576rpx;
		box-shadow: 0px 13px 29px 0px rgba(0, 0, 0, 0.07);
		margin-top: 64rpx;
		color: #1B1D21;
		padding-bottom: 40rpx;
	}

	.introduceHead {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.8);
		font-weight: 500;
		padding-top: 10rpx;
		font-family: PingFang SC;
	}

	.introduce {
		padding-left: 20rpx;
		color: #FFFFFF;
		font-size: 48rpx;
		font-family: FZZhengHeiS-DB-GB;
		font-weight: bold;
		margin-top: 30rpx;
	}

	.containerImgHead {
		padding-top: 71rpx;
	}

	.containerImg {
		width: 100%;
		height: 642rpx;
		position: absolute;
		top: 0;
		z-index: -1;
	}

	* {
		padding: 0;
		margin: 0;
	}

	.containerHead {
		width: 100%;
	}

	.container {
		width: 100%;
		position: relative;
		padding: 0 27rpx;
		box-sizing: border-box;
	}
	@font-face {
		font-family: uniicons;
		/* src: url('/static/uni.ttf'); */
		src: url(../../static/uni.ttf);
	}
	@font-face {
		font-family: Bahnschrift;
		/* src: url('../../static/BAHNSCHRIFT.TTF'); */
		src: url(https://wmlive-oss.vipwm.cn/record/live/BAHNSCHRIFT.TTF);
	}
	@font-face {
		font-family: PingFang SC;
		/* src: url('../../static/PINGFANG REGULAR.ttf'); */
		src: url(https://wmlive-oss.vipwm.cn/record/live/PINGFANG%20REGULAR.TTF);
	}
</style>
 